<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
</head>
<body>
    <header class="banner">
        <div class="swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide"><img src="./img/index-swiper-bg1.jpg" alt=""></div>
              <div class="swiper-slide"><img src="./img/index-swiper-bg2.jpg" alt=""></div>
              <div class="swiper-slide"><img src="./img/index-swiper-bg3.jpg" alt=""></div>
            </div>
            <div class="swiper-pagination"></div><!--分页器。如果放置在swiper外面，需要自定义样式。-->
          </div>
    </header>
    <main>
        <ul class="part-one">
            <li class="order">
                <span>今日排名</span>
                <strong></strong>
                <img src="./img/index-card-rank.png" alt="">
            </li>
            <li class="day">
                <span>累计打卡天</span>
                <strong></strong>
                <img src="./img/index-card-sum.png" alt="">
            </li>
        </ul>
        <ul class="part-two">
            <li class="sports-data">
                <!-- <img src="./img/index-card-data.png" alt=""> -->
                <span>运动数据</span>
            </li>
            <li class="sum">
                <span>累计运动徽章</span>
                <p><span></span>枚</p>
                <img src="./img/index-card-badge.png" alt="">
            </li>
        </ul>
        <section class="train">课程训练</section>
        <section class="run">户外跑步</section>   
    </main>
</body>
</html>